<!DOCTYPE html>
<html lang=zh>
<head>
<meta charset=utf-8 name=viewport content="width=device-width">
<title>在线制作二维码</title>
<script src="/public/something/sometool.js"></script>
<script src="/public/something/other/dialog.js"></script>
</head>
<body>
<!--
API:
https://api.qrserver.com/v1/create-qr-code/?color=000000&bgcolor=FFFFFF&data=test&qzone=1&margin=0&size=1000x1000&ecc=H&format=png&download=1
-->
<h1>在线制作二维码</h1>
<form method=post action="make" id=makeform>
二维码内容: <textarea id=qrcon style="width:80%;" rows=6 placeholder="请输入内容"></textarea><br>
<button type=submit>制作</button>
</form>
<div id=continuelog title=Continue>
<span id=continuewait>Please wait...<br>
Now: <span id=continuenow>Check whether you are connected to the Internet</span><br></span>
<progress id=completeprog max=100 value=0></progress><br><span id=completeschedule>0</span>% Complete
<span id=continuehidearea></span></div>
<form id=dlog title="下载二维码">
<big>下载二维码</big><br>
二维码背景颜色: <input id=qrbgc type=color value="#ffffff"><br>
二维码颜色: <input id=qrc type=color value="#000000"><b>提示:</b> 请不要太接近背景颜色<br>
二维码大小: <input id=qrs type=number min=150 max=1000 step=1 placeholder="请输入" value=400><br>
预览 <button type=button id=loadpreview onclick="previewlog.dialog('open');qrc.oninput()">加载预览</button><br>
下载 <button type=submit onclick="pngjpg='png';startd=1;">PNG</button> <button type=submit onclick="pngjpg='jpg';startd=1;">JPG</button>
</form>
<div id=previewlog title=预览>
<img id=previewimg />
</div>
<div id=oklog title="正在加载...">
正在加载...<br>
当前: <span id=loadnow>正在加载...</span><br>
<progress id=okprogress value=0 max=100></progress><span id=okprogressbfz>0</span>%完成
</div>
<span id=storeatag style="position:absolute;top:-1000px;"></span>

<script>
continuelog.dialog({autoOpen:0,modal:1,width:"300px",hidex:1})
dlog.dialog({modal:1});oklog.dialog({modal:1,hidex:1});previewlog.dialog({zindex:8,width:"50%"});
//{let a=location.href.split("#")[1].replace("/","");if(a) qrcon.value=a;}
makeform.onsubmit=function(event){
event.preventDefault();
continuelog.dialog("open");
continuehidearea.innerHTML="<img hidden src='https://www.w3school.com.cn/i/eg_mouse.jpg?r="+new Date().getTime()+"'"+
" onload='internetnormalornotsuccess(1)' onerror='internetnormalornotsuccess(0)' />"
}
function internetnormalornotsuccess(boo){
boo=(!!boo);
if(boo){
continuewait.hidden=1;
incrementcomplete(0);
} else {
continuewait.innerHTML="Unable to connect to the internet.<br><button onclick='continuelog.dialog(\"close\")'>Close</button>"
}
}
function incrementcomplete(a){
completeschedule.innerHTML=completeprog.value=a;
if(a!=100) setTimeout("incrementcomplete("+(a+1)+")",8);
if(a==100) nextMake();
}
function nextMake(){
continuelog.dialog("close");
dlog.dialog("open");
continuewait.hidden=completeschedule.innerHTML=completeprog.value=0;
continuewait.innerHTML="Please wait...<br>"+
"Now: <span id=continuenow>Check whether you are connected to the Internet</span><br>";
}
dlog.onsubmit=function(event){
event.preventDefault();
var dc,dbg,dd,ds,dt;
dc=qrc.value.replace("#","");
dbg=qrbgc.value.replace("#","");
dd=qrcon.value;
ds=qrs.value+"x"+qrs.value;
dt=pngjpg;
var a=document.createElement("a");
a.href=`https://api.qrserver.com/v1/create-qr-code/?color=${dc}&bgcolor=${dbg}&data=${dd}&qzone=1&margin=0&size=${ds}&ecc=H&format=${dt}&download=1`
a.download="qrcode."+dt;
a.hidden=1;a.target="_blank";
storeatag.append(a);
window.downloadTag=a;
if(window.startd){
dlog.dialog("close");
oklog.dialog("open");
setTimeout(function(){
okprogress.value=okprogressbfz.innerHTML=20;
loadnow.innerHTML="正在拼命加载,请稍候...";
setTimeout(function(){
okprogress.value=okprogressbfz.innerHTML=40;
loadnow.innerHTML="正在获取api地址,请稍候...";
setTimeout(function(){
okprogress.value=okprogressbfz.innerHTML=60;
loadnow.innerHTML="正在加载api地址,请稍候...";
setTimeout(function(){
okprogress.value=okprogressbfz.innerHTML=80;
loadnow.innerHTML="正在连接,请稍候...";
setTimeout(function(){
okprogress.value=okprogressbfz.innerHTML=100;
loadnow.innerHTML="已完成<br><button onclick='downloadTag.click()'>下载</button><button onclick='oklog.dialog(\"close\");"+
"okprogressbfz.innerHTML=okprogress.value=0;loadnow.innerHTML="+'"正在加载..."'+";'>关闭</button>";
},1000);
},1000);
},1000);
},1000);
},1000);
};
}
qrbgc.oninput=qrc.oninput=qrs.oninput=function(){
var dc,dbg,dd,ds,ds2,dt;
dc=qrc.value.replace("#","");
dbg=qrbgc.value.replace("#","");
dd=qrcon.value;
ds2=(screen.width/2);
ds=ds2+"x"+ds2;
dt="png";
var href=`https://api.qrserver.com/v1/create-qr-code/?color=${dc}&bgcolor=${dbg}&data=${dd}&qzone=1&margin=0&size=${ds}&ecc=H&format=${dt}&download=1`
previewimg.src=href;
}
</script>

</body>
</html>
